<template>
  <div>
    <div class="e-item">
      <span class="title">跳转类型</span>
      <div class="dis-block">
        <w-select :defaultSe='false' :options='hrefType' v-model='value.type' @on-select='clearValue'></w-select>
      </div>
    </div>
    <!--跳转类型对应的选项-->
    <div class="e-item" v-if='isShow'>
      <span class="title">{{value.text}}</span>
      <div class="dis-block">
        <w-select :defaultSe='false' :options='channelList' v-if='value.type == "channel"' v-model="value.value"></w-select>
        <w-select :defaultSe='false' :options='storeList' v-if='value.type == "store"' v-model="value.value"></w-select>
        <w-input :holder='`请填写`' v-if='isShow == "input"' v-model="value.value"></w-input>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  props: {
    terminal: String,
    three: String,
    wideTemplate: String,
    value: Object
  },
  data() {
    return {
      hrefType: [
        {value: 'goodsInfo', label: '商品详情'},
        {value: 'channel', label: '频道'},
        {value: 'store', label: '店铺'},
        {value: 'link', label: '链接地址'},
        {value: 'keyword', label: '关键字搜索'}
      ],
      isShow: ''
    }
  },
  created() {
    if (this.terminal == 'PC') {
      if (this.wideTemplate == 'adv_more' || this.wideTemplate == 'advinfo') {
        this.hrefType = [
          {value: 'goodsInfo', label: '商品详情'},
          {value: 'goodsList', label: '商品列表'},
          {value: 'channel', label: '频道'},
          {value: 'store', label: '店铺'},
          {value: 'link', label: '链接地址'},
          {value: 'keyword', label: '关键字搜索'},
          {value: 'storeSearch', label: '店铺关键字搜索'}
        ]
      } else {
        this.hrefType = [
          {value: 'goodsInfo', label: '商品详情'},
          {value: 'channel', label: '频道'},
          {value: 'store', label: '店铺'},
          {value: 'link', label: '链接地址'},
          {value: 'keyword', label: '关键字搜索'}
        ]
      }
    } else {
      this.hrefType = [
        {value: 'goodsInfo', label: '商品详情'},
        {value: 'goodsList', label: '商品列表'},
        {value: 'channel', label: '频道'},
        {value: 'store', label: '店铺'},
        // {value: 'link', label: '链接地址'},
        {value: 'keyword', label: '关键字搜索'},
        {value: 'storeSearch', label: '店铺关键字搜索'}
      ]
    }
    this.fetchChannelList({token: this.token, terminal: this.terminal, three: this.three})
    this.fetchStoreList({token: this.token, three: this.three})
  },
  updated() {
    if (this.value.type == 'goodsInfo') {
      this.value.text = '商品货号'
      this.isShow = ''
    }
    if (this.value.type == 'goodsList') {
      this.value.text = '商品列表'
      this.isShow = ''
    }
    if (this.value.type == 'channel') {
      this.value.text = '频道'
      this.isShow = 'select'
    }
    if (this.value.type == 'store') {
      this.value.text = '店铺'
      this.isShow = 'select'
    }
    if (this.value.type == 'link') {
      this.value.text = '图片链接'
      this.isShow = 'input'
    }
    if (this.value.type == 'keyword') {
      this.value.text = '关键字搜索'
      this.isShow = 'input'
    }
    if (this.value.type == 'storeSearch') {
      this.value.text = '店铺关键字搜索'
      this.isShow = 'input'
    }
  },
  computed: {
    ...mapGetters(['token', 'channelList', 'storeList'])
  },
  methods: {
    ...mapActions(['fetchChannelList', 'fetchStoreList']),
    clearValue() {
      this.value.value = ''
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../../scss/_var.scss';
@import '../../../scss/_comment.scss';
.e-item {
  display: block;
  width: 405px;
  margin: 0 auto 20px !important;
  .title {
    width: 106px;
    font-size: 14px;
  }
  .dis-block {
    width: 284px;
  }
  img {
    width: 54px;
    height: 54px;
  }
  em {
    display: block;
    color: $color-main;
    text-align: right;
  }
}
</style>
